<template>
    <div>
        <ul>
           <!-- 
               设置了key，相当于给这个li标签加了一个标记，
               新旧虚拟dom对比的时候，就会按着key的值 对比原来的那个标签
            -->
           <li v-for="item in arr" :key="item">
              {{ item }}<input type="text">
           </li>
            
        </ul>
        <button @click="addOne">添加一项</button>
    </div>
  </template>
  
  <script>
    // key 必须是 字符串或者数值类型，不能是对象或数组等非基本类型的数据。
    // key 的作用：
    // 遍历的时候 :key="唯一标识" 
    // 标识元素的唯一性，可以更好的进行新旧虚拟dom的对比，提高了对比的复用性能。

  export default {
      data(){
          return {
              arr:['老大','老二','老三']
          }
      },
      methods:{
          addOne(){
              // this.arr.splice('起始位置，从哪儿添加', 0, 添加的元素)
              this.arr.splice(1, 0, '老六')
          }
      }
  }
  </script>
  
  <style>
  
  </style>